<template>
  <base-list-page
    :columns="columns"
    :data-source="dataList"
    :loading="loading"
    :pagination="pagination"
    :search-items="searchItems"
    :actions="actions"
    :row-key="'id'"
    @search="handleSearch"
    @reset="handleReset"
    @change="handleTableChange"
    @action="handleAction"
    :query-params="queryParams"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <a-space>
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handlePermission(record)">分配权限</a>
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定要删除此角色吗？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDelete(record)"
          >
            <a class="danger-text">删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
    <template #extraContent>
      <!-- 角色表单弹窗 -->
      <role-form-modal
        v-if="modalVisible"
        ref="roleFormModalRef"
        v-model:visible="modalVisible"
        :formState="formState"
        :modalTitle="modalTitle"
        @submit="submitForm"
        @cancel="resetForm"
      >
      </role-form-modal>
      <!-- 权限分配弹窗 -->
      <role-permission-modal
        v-if="permModalVisible"
        ref="rolePermissionModalRef"
      ></role-permission-modal>
    </template>
  </base-list-page>
</template>
<script setup>
import { useTableCrud } from "@/hooks/table/useTableCrud";
import { getRoleList, addRole, deleteRole, updateRole } from "@/request/api";
import { PlusOutlined } from "@ant-design/icons-vue";
import RoleFormModal from "./modal/RoleFormModal.vue";
import RolePermissionModal from "./modal/RolePermissionModal.vue";
// 使用通用CRUD hook
const {
  // 状态
  dataList,
  loading,
  pagination,
  formState,
  selectedRowKeys,
  selectedRows,
  searchParams,
  modalVisible,
  submitLoading,
  modalTitle,
  queryParams,

  // 方法
  loadData,
  handleAdd,
  handleEdit,
  handleDelete,
  handleBatchDelete,
  refreshData,
  submitForm,
  resetForm,
  handleSearch,
  handleReset,
  handleTableChange,
  clearSelection,
} = useTableCrud({
  api: {
    list: getRoleList,
    add: addRole,
    delete: deleteRole,
    update: updateRole,
  },
});
// 表格列定义
const columns = [
  { title: "角色名称", dataIndex: "name", key: "name" },
  { title: "角色编码", dataIndex: "code", key: "code" },
  { title: "描述", dataIndex: "description", key: "description" },
  { title: "创建时间", dataIndex: "created_at", key: "created_at" },
  { title: "操作", key: "action", fixed: "right", width: 250 },
];
// 搜索配置
const searchItems = [
  {
    name: "name",
    label: "角色名称",
    component: "a-input",
    props: {
      placeholder: "请输入角色名称",
      allowClear: true,
    },
  },
];
// 操作按钮配置
const actions = [
  {
    label: "新增角色",
    props: {
      type: "primary",
    },
    icon: PlusOutlined,
    handler: handleAdd,
    key: "add",
  },
];
const rolePermissionModalRef = ref(null);
const permModalVisible = ref(false);
const handlePermission = (record) => {
  permModalVisible.value = true;
  nextTick(() => {
    console.log("rolePermissionModalRef", rolePermissionModalRef);
    rolePermissionModalRef.value.handlePermission(record);
  });
};
// 处理操作按钮点击
const handleAction = (action) => {
  if (action.key === "add") {
    handleAdd();
  }
};
</script>
